<!-- 间接项目汇总 -->
<template>
  <div>
    <div class="list-table">
      <el-form ref="queryForm" :model="queryParams" :inline="true">
        <el-form-item :label="$t('子基金名称')" prop="dealName">
          <el-input
            v-model="queryParams.dealName"
            :placeholder="$t('子基金名称')"
            clearable
            @keyup.enter.native="queryHandle"
          />
        </el-form-item>
        <el-form-item :label="$t('公司名称')" prop="companyName">
          <el-input
            v-model="queryParams.companyName"
            :placeholder="$t('公司名称')"
            clearable
            @keyup.enter.native="queryHandle"
          />
        </el-form-item>
        <el-form-item :label="$t('出资主体')" prop="investmentName">
          <el-input
            v-model="queryParams.investmentName"
            :placeholder="$t('出资主体')"
            clearable
            @keyup.enter.native="queryHandle"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t('搜索') }}</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('重置') }}</el-button>
          <el-button
            v-hasPermi="['bf:indirectProjectAnalysis:exportReport']"
            type="warning"
            icon="el-icon-download"
            size="mini"
            @click="exportHandle"
          >{{ $t("导出") }}</el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="loading" tooltip-effect="darkTable" :data="bfInvestGroupList" border :span-method="objectSpanMethod">
        <el-table-column :label="$t('序号')" type="index" align="center" show-overflow-tooltip width="50">
          <template slot-scope="scope">
            {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('出资主体')" align="center" prop="investmentName" show-overflow-tooltip min-width="180">
          <template slot-scope="scope">
            {{ scope.row.investmentName }}
          </template>
        </el-table-column>
        <!--        <el-table-column :label="$t('SPV')" align="center" prop="spvName" min-width="180">-->
        <!--          <template slot-scope="scope">-->
        <!--            {{ scope.row.spvName }}-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column :label="$t('子基金名称')" align="center" prop="dealName" show-overflow-tooltip min-width="180">
          <template slot-scope="scope">
            <router-link
              target="_blank"
              :to="{path:'/company/base/companyBaseHome',query:{companyId:scope.row.indirectDealId}}"
              class="link_a"
            >{{ scope.row.dealName }}
            </router-link>
          </template>
        </el-table-column>
        <el-table-column :label="$t('公司名称')" align="center" prop="company.companyName" show-overflow-tooltip min-width="180">
          <template slot-scope="scope">
            <router-link
              target="_blank"
              :to="{path:'/company/base/companyBaseHome',query:{companyId:scope.row.indirectDealId, dealId:scope.row.dealId, source:'BF_PORTFOLIO'}}"
              class="link_a"
            >{{ scope.row.company.companyName }}
            </router-link>
          </template>
        </el-table-column>
        <!-- 地域  provinceRegistered -->
        <el-table-column v-if="!isEmpty(queryParams.provinceRegistered)" :label="$t('地域')" align="center" prop="provinceRegisteredLabel" show-overflow-tooltip min-width="100">
          <template slot-scope="scope">
            <span>{{ (scope.row.company.provinceRegisteredLabel) }}</span>
          </template>
        </el-table-column>
        <!-- 行业 -->
        <el-table-column v-if="!isEmpty(queryParams.industryFirstLabel)" :label="$t('行业')" align="center" prop="industryFirstLabel" show-overflow-tooltip min-width="100">
          <template slot-scope="scope">
            <span>{{ (scope.row.company.industryFirstLabel) }}</span>
          </template>
        </el-table-column>
        <!-- 阶段-->
        <el-table-column v-if="!isEmpty(queryParams.enterpriseStage)" :label="$t('行业')" align="center" prop="enterpriseStageLabel" show-overflow-tooltip min-width="100">
          <template slot-scope="scope">
            <span>{{ (scope.row.enterpriseStageLabel) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('投资时间')" align="center" prop="investmentTime" show-overflow-tooltip min-width="100">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.investmentTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('协议金额') + $t('金额单位')" align="center" prop="agreementAmount" show-overflow-tooltip min-width="120">
          <template slot-scope="scope">
            <span class="money-text">{{ moneyFormat(scope.row.agreementAmount, 'w') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('划款金额') + $t('金额单位')" align="center" prop="bfPortfolioVo.total" show-overflow-tooltip min-width="120">
          <template slot-scope="scope">
            <span class="money-text">{{ moneyFormat(scope.row.bfPortfolioVo.total, 'w') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('持股比例(%)')" align="center" prop="latestShareholdingRatio" show-overflow-tooltip min-width="120">
          <template slot-scope="scope">
            <span>{{ moneyFormat(scope.row.latestShareholdingRatio) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('最新估值') + $t('金额单位')" align="center" prop="bfPortfolioVo.latestValuation" show-overflow-tooltip min-width="120">
          <template slot-scope="scope">
            <span class="money-text">{{ moneyFormat(scope.row.bfPortfolioVo.latestValuation, 'w') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('累计回款金额') + $t('金额单位')" align="center" prop="bfPortfolioVo.amountRecovered" show-overflow-tooltip min-width="120">
          <template slot-scope="scope">
            <span class="money-text">{{ moneyFormat(scope.row.bfPortfolioVo.amountRecovered, 'w') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('回款本金') + $t('金额单位')" align="center" prop="bfPortfolioVo.exitCost" show-overflow-tooltip min-width="120">
          <template slot-scope="scope">
            <span class="money-text">{{ moneyFormat(scope.row.bfPortfolioVo.exitCost, 'w') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('回款收益') + $t('金额单位')" align="center" prop="bfPortfolioVo.realizedRevenue" show-overflow-tooltip min-width="140">
          <template slot-scope="scope">
            <span class="money-text">{{ moneyFormat(scope.row.bfPortfolioVo.realizedRevenue, 'w') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('在投本金') + $t('金额单位')" align="center" prop="bfPortfolioVo.costNotWithdrawn" show-overflow-tooltip min-width="140">
          <template slot-scope="scope">
            <span class="money-text">{{ moneyFormat(scope.row.bfPortfolioVo.costNotWithdrawn, 'w') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('未实现收益/损失') + $t('金额单位')" align="center" prop="bfPortfolioVo.loss" show-overflow-tooltip min-width="150">
          <template slot-scope="scope">
            <span class="money-text">{{ moneyFormat(scope.row.bfPortfolioVo.loss, 'w') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('上市情况')" align="center" prop="listedSituation" show-overflow-tooltip min-width="100" :formatter="listedSituationFormat" />
        <el-table-column :label="$t('上市板块')" align="center" prop="listedSector" show-overflow-tooltip min-width="100" :formatter="listedSectorFormat" />
        <el-table-column :label="$t('股票代码')" align="center" prop="stockCode" show-overflow-tooltip min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.company.stockCode }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('预计上市时间')" align="center" prop="expectedTimeToMarket" show-overflow-tooltip min-width="100">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.company.expectedTimeToMarket) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('操作')" fixed="right" align="center" class-name="small-padding fixed-width" width="120">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="text"
              icon="el-icon-view"
              @click="dealProjectPenetrationView(scope.row)"
            >{{ $t('穿透图') }}</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <el-dialog v-if="forceComponentOpen" :title="$t('项目穿透图')" :visible.sync="forceComponentOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <forceComponent ref="forceComponent" :bus-data="forceData" />
    </el-dialog>
  </div>
</template>

<script>
import { listIndirectProjectSummary } from '@/api/bf/indirectProjectAnalysis/indirectProjectSummary.js'
import forceComponent from '@/components/Deal/forceComponent.vue'
import { downLoadFileOpen } from '@/utils/zipdownload'
export default {
  components: {
    forceComponent
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 参股基金_投资组合表格数据
      bfInvestGroupList: [],
      // 企业阶段字典
      enterpriseStageOptions: [],
      // 企业阶段字典
      focusIndustryOptions: [],
      // 上市情况字典
      listedSituationOptions: [],
      // 上市板块字典
      listedSectorOptions: [],
      // 弹出层标题
      title: '投资组合',
      // 关系数据弹出窗口
      relationFormOpen: false,
      // 是否显示弹出层
      formOpen: false,
      // 查询参数
      queryParams: {
        dealId: this.$route.query.id,
        investmentName: undefined,
        dealName: undefined,
        companyName: undefined,
        pageNum: 1,
        pageSize: 10
      },
      parentQueryParams: {
        provinceRegistered: undefined,
        enterpriseStage: undefined,
        industryFirstLabel: undefined,
        listedSituation: undefined
      },
      // 表单参数
      form: {
        company: {
          listedSituation: undefined,
          listedSector: undefined
        },
        bfPortfolioVo: {}
      },
      // 表单校验
      rules: {},
      industryFirstLabel: '',
      forceComponentOpen: false,
      forceData: undefined
    }
  },
  created() {
    this.getDicts('enterprise_stage').then(response => {
      this.enterpriseStageOptions = response.data
    })
    this.getDicts('deal_industry_focus').then(response => {
      this.focusIndustryOptions = response.data
    })
    this.getDicts('bf_group_listed_situation').then(response => {
      this.listedSituationOptions = response.data
    })
    this.getDicts('bf_group_listed_sector').then(response => {
      this.listedSectorOptions = response.data
    })
  },
  mounted() {
    this.getList()
  },
  methods: {
    /** 查询参股基金_投资组合列表 */
    getList() {
      this.loading = true
      // 阶段查询条件
      this.queryParams.enterpriseStage = this.parentQueryParams.enterpriseStage
      // 地域
      this.queryParams.provinceRegistered = this.parentQueryParams.provinceRegistered
      // 行业
      this.queryParams.industryFirstLabel = this.parentQueryParams.industryFirstLabel
      // 上市情况
      this.queryParams.listedSituation = this.parentQueryParams.listedSituation
      // 标签
      this.queryParams.tagsContext = this.parentQueryParams.tagsContext
      listIndirectProjectSummary(this.queryParams).then(response => {
        this.bfInvestGroupList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 企业阶段字典翻译
    enterpriseStageFormat(row) {
      return this.selectDictLabel(this.enterpriseStageOptions, row.enterpriseStage)
    },
    // 聚焦行业字典翻译
    focusIndustryFormat(row) {
      return this.selectDictLabel(this.focusIndustryOptions, row.focusIndustry)
    },
    // 上市情况字典翻译
    listedSituationFormat(row) {
      return this.selectDictLabel(this.listedSituationOptions, row.company.listedSituation)
    },
    // 上市板块字典翻译
    listedSectorFormat(row) {
      return this.selectDictLabel(this.listedSectorOptions, row.company.listedSector)
    },
    // 表单重置
    reset() {
      this.form = {
        bfPortfolioVo: {},
        company: {},
        id: undefined,
        dealId: this.$route.query.id,
        dealName: undefined,
        companyId: undefined,
        name: undefined,
        sdr: undefined,
        investTime: undefined,
        investmentTime: undefined,
        enterpriseStage: undefined,
        preInvestmentVal: undefined,
        postInvestmentVal: undefined,
        agreementAmount: undefined,
        transferAmount: undefined,
        focusIndustry: undefined,
        latestShareholdingRatio: undefined,
        remark: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        delFlag: undefined
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    queryHandle() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryHandle()
    },
    /** 项目穿透 */
    dealProjectPenetrationView(row) {
      this.forceData = { busId: row.indirectDealId, busType: 'company', busName: row.company.companyName }
      this.forceComponentOpen = true
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (!row && !column) {
        console.log('error')
      }
      if (columnIndex !== 0 && columnIndex !== 1 && columnIndex !== 2) {
        const spanArr = this.rowspan(this.bfInvestGroupList)
        for (var i = 0; i < spanArr.length; i++) {
          return { rowspan: spanArr[rowIndex], colspan: 1 }
        }
      }
    },
    rowspan(data) {
      // 二维数组，用于存放单元格合并规则
      const spanArr = []
      // 用于存储相同项的开始index
      let position = 0
      data.forEach((item, index) => {
        if (index === 0) {
          spanArr.push(1)
          position = 0
        } else {
          if (data[index].company.id === data[index - 1].company.id) {
            spanArr[position] += 1 // 有相同项
            spanArr.push(0) // 名称相同后往数组里面加一项0
          } else {
            spanArr.push(1) // 同列的前后两行单元格不相同
            position = index
          }
        }
      })
      return spanArr
    },
    exportHandle() {
      var _this = this
      const query = this.queryParams
      this.$confirm(this.$t('是否确认导出?'), this.$t('警告'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      }).then(function() {
        var dealName = _this.isEmpty(query.dealName) ? '' : query.dealName
        var companyName = _this.isEmpty(query.companyName) ? '' : query.companyName
        var investmentName = _this.isEmpty(query.investmentName) ? '' : query.investmentName
        var param = '?dealName=' + dealName + '&companyName=' + companyName + '&investmentName=' + investmentName
        return downLoadFileOpen('/bf/indirectProjectAnalysis/exportReport' + param)
      }).catch(function() {
      })
    }
  }
}
</script>
<style scoped lang="scss">
.multi-table-td {
  border-bottom: 1px solid #dfe6ec;
  padding: 7px 0;
  margin: 0 -10px;
  div{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 10px;
  }
  &:first-child{
    padding-top: 0;
  }
  &:last-child{
    border: 0;
    padding-bottom: 0;
  }
}
.noStyle{
  padding: 0px;
}
</style>
